<template>
	<view :data-theme="theme" class="container">
		<view class="header">
			<!-- <u-cell-group>
				<u-cell size="large" :title="currentDate" value="查看送货记录" isLink
					url="/pages/scheduledDelivery/deliveryRecord/deliveryRecord"></u-cell>
			</u-cell-group> -->
			<view class="item_content">
				<view class="item_content_left">
					{{currentDate}}
				</view>
				<view class="item_content_right" style="display: flex;justify-content: center;" @click="goLick()">
					<span>查看送货记录</span>
					<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
					<uni-icons type="forward" size="20" ></uni-icons>
				</view>
			</view>
			<!-- <u-alert :title="title" type="warning"></u-alert> -->
			<uni-notice-bar single :text="title" />
		</view>

		<swiper class="tab-view" :duration="300">
			<swiper-item class="swiper-item" style="display: flex;">
				<scroll-view class="scroll-view" @scrolltolower="scrolltolowerFn" scroll-y
					style="height: 100%; overflow: hidden;">
					<!-- 封装组件 -->
					<nvue-swiper-scheduled ref="tab" @toDetailPage="toDetailPage"></nvue-swiper-scheduled>
				</scroll-view>
			</swiper-item>
		</swiper>

		<view class="footer">
			<view style="margin:0 20rpx 20rpx 20rpx;">
				<!-- <u-button type="primary" :color="bgColor" :plain="true" text="+ 添加预约单"
					@click="toAddScheduled()"></u-button> -->
				<button class="bg_color" style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
					:color="bgColor" @click="toAddScheduled()">+ 添加预约单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import nvueSwiperScheduled from './components/nvue-swiper-scheduled.vue';
	import {
		setThemeColor
	} from '../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			nvueSwiperScheduled
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				currentDate: '',
				title: '将送货单转发给送货司机，司机可签到并实时查看交货进度',
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getCurrentTime();
		},
		onShow() {
			//初始化页面
			if (this.$refs.tab) {
				this.$refs.tab.getQueryList();
			}
		},
		methods: {
			scrolltolowerFn() {
				this.$refs.tab.scrolltolowerFn();
			},
			toDetailPage(item) {
				this.goPage('/pages/scheduledDelivery/scheduledDetail/scheduledDetail?data=' + JSON.stringify(item));
			},
			toAddScheduled() {
				this.goPage('/pages/scheduledDelivery/addScheduledDelivery/addScheduledDelivery');
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			//获取当前日期
			getCurrentTime() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = currentDate.getMonth() + 1;
				const day = currentDate.getDate();
				// 格式化日期
				const formattedDate = `${year}-${this.padZero(month)}-${this.padZero(day)}`;
				this.currentDate = formattedDate;
			},
			padZero(value) {
				return value.toString().padStart(2, '0');
			},
			goLick(){
				this.goPage('/pages/scheduledDelivery/deliveryRecord/deliveryRecord');
			}
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		background-color: #fff;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	// .content {
	// 	flex: 1;
	// 	overflow: hidden;
	// }

	.scroll-view {
		height: 100%;
	}

	// .scroll-view-inner {
	// 	height: 200%;
	// 	/* 根据实际情况设置高度 */
	// 	background-color: #fff;
	// 	/* 内容区域背景色 */
	// }
	
	.item_content {
		display: flex;
		justify-content: space-between;
		margin: 40rpx;
		font-size: 32rpx;
		
		.item_content_left{
		}
		
		.item_content_right{
			justify-content: right;
		}
	}
</style>